<template>
	<view>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">姓名</view>
				<input v-model="address.consignee" placeholder="请输入收货人姓名" focus name="consignee" maxlength="20"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input type="number" v-model="address.phone" placeholder="请输入收货人号码" name="phone"></input>
				<view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">地址选择</view>
				<picker mode="multiSelector" :range="citys" range-key="name" @columnchange="changeCity" @change="confirmChange">
					<view class="picker">{{selectCity.province}} - {{selectCity.city}} - {{selectCity.district}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input v-model="address.address" placeholder="请输入详细收货地址" name="address"></input>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">默认地址</view>
				<switch v-model="address.defaultAddress" :checked="address.defaultAddress" @change="changeDefaultAddress"></switch>
			</view>
			<view class="add-section">
				<button class="btn round main-bg-color" @click="addAddress">保存</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {CityService} from "@/api/CommonService.js"
	import {UserService} from "@/api/UserService.js"
	import {Util} from "@/utils/util.js"
	export default {
		data() {
			return {
				isEdit:false,
				address:{id:0,districtId:0,address:undefined,phone:undefined,consignee:undefined,defaultAddress:false},
				citys: [],selectCity:{province:"省",provinceId:0,city:"市",cityId:0,district:"区",districtId:0}
			};
		},
		onPullDownRefresh() {
			this.loadCitys();
			uni.stopPullDownRefresh();
		},
		onLoad() {
			const that=this;
			const eventChannel=that.getOpenerEventChannel();
			eventChannel.on("sendEditAddressData",function(res){
				// 列表页面编辑事件触发
				that.address=res;
				that.selectCity=that.address
				that.isEdit=true;
			});
			this.loadCitys();
		},
		methods: {
			addAddress(){
				this.address.districtId=this.selectCity.districtId;
				if(Util.isEmpty(this.address.consignee)){
					uni.showToast({icon:"none",title:"请输入收货人姓名!"});
					return;
				}
				if(Util.isEmpty(this.address.phone) || !Util.isPhone(this.address.phone)){
					uni.showToast({icon:"none",title:"收货人手机号码不正确!"});
					return;
				}
				if(this.address.districtId===0){
					uni.showToast({icon:"none",title:"请选择省市区!"});
					return;
				}
				if(Util.isEmpty(this.address.address)){
					uni.showToast({icon:"none",title:"请输入详细收货地址!"});
					return;
				}
				if(!this.isEdit){
					UserService.addAddress(this.address).then(()=>{
						uni.navigateBack({});
					});
				}else{
					UserService.editAddress(this.address).then(()=>{
						uni.navigateBack({});
					});
				}
			},
			loadCitys(){
				CityService.getCitys(3).then(res=>{
					const province=res;
					this.citys=[[],[],[]];
					this.citys[0]=res;
					this.citys[1]=res[0].children;
					this.citys[2]=res[0].children[0].children;
				});
			},
			changeDefaultAddress(e){
				this.address.defaultAddress=e.detail.value;
			},
			changeCity(e){
				const column=e.detail.column;
				const value=e.detail.value;
				if(column===0){
					this.citys[1]=this.citys[0][value].children;
					this.citys[2]=this.citys[1][0].children;
				}else if(column===1){
					this.citys[2]=this.citys[1][value].children;
				}
				this.$forceUpdate();
			},
			confirmChange(e){
				const province=this.citys[0][e.detail.value[0]];
				const city=this.citys[1][e.detail.value[1]];
				const district=this.citys[2][e.detail.value[2]];
				this.$nextTick(function(){
					this.selectCity.province=province.name;
					this.selectCity.provinceId=province.id;
					this.selectCity.city=city.name;
					this.selectCity.cityId=city.id;
					this.selectCity.district=district.name;
					this.selectCity.districtId=district.id;
				});
			}
		}
	}
</script>

<style lang="scss">
	.add-section{
		margin-top:50rpx;
		width:100%;
		text-align:center;
		bottom: 100rpx;
		button{
			width:80%;
		}
	}
</style>
